<template>
    <div class="postion-detail">
        <van-image style="position: relative;right: 10px;top: 3px;"
            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1062.svg" />
        <span style="position: relative; bottom: 5px; left: 2px;">故宫博物馆<span
                style="color: #666;position: relative; left: 5px;">></span></span>
    </div>

    <div class="des-detail">
        <p><span style="color: #333;font-size: 18px;font-weight: bold;">别再瞎逛故宫了，去过100次的土著攻略</span></p>
        <p style="font-size: 17px;">
            <span>在帝都北京生活了这么多久了，每年还是总会去　 </span>
            <span style="color:#3478F6;">故宫</span>
            <span> 打卡好几次。</span>
        </p>

        <p style="font-size: 17px;">
            <span>春天的樱花雨~~~~夏天里的艳阳天~~~~秋日满地飘落的银杏~~~~冬天初雪那一天必须要去故宫许愿。</span>
        </p>

        <p style="font-size: 17px;">
            <span>但是如果你没有来过北京，那真的可以好好把表姐这一篇看完，因为故宫真的太大了，如果没有人带着你或者不提前做好攻略，真的是迷路加分分钟走到哭。</span>
        </p>

        <p style="font-size: 17px;">
            <span>大表姐就把我经常去故宫的几条路线和大家分享一下，经过我多年用脚步丈量故宫的经验，这一条真的还不错：</span>
        </p>

        <p style="font-size: 17px;">

            <van-text-ellipsis rows="1" content="【高能预警】浏览路线用时约4小时，啦路上慢点卡洛斯，阿是大客户，啊实打实可好看交换空间合计看哈" expand-text="展开"
                collapse-text="收起" />
        </p>

        <p style="color: #999;">
            2098-11-20发布
        </p>

        <p style="color: #999;">
            来自北京
        </p>

        <p>
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u545.svg" />
        </p>
        <div class="card-detail">
            <div class="left">
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u495.svg" />
            </div>
            <div class="right">
                <p>
                    <span>故宫博物馆</span>
                </p>
                <p><span style="background-color: rgba(242, 242, 242, 1); color: #666;padding: 2px">5A</span>
                </p>
                <p><span style="font-size: 16px; color: #3478F6;font-weight: bold;">4.8分</span><span
                        style="color: #797979;padding-left: 10px;">137532人评价</span>
                </p>
                <p style="color: #797979;">北京市东城区景山前街4号</p>
            </div>
            <div class="look">去看看</div>
        </div>

    </div>

</template>

<style scoped lang="scss">
.postion-detail {
    width: 125px;
    height: 30px;
    background-color: #f6f6f6;
    border-radius: 35px;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
}

.des-detail {
    width: 92%;
    padding: 15px;

}


.card-detail {
    width: 95%;
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(242, 242, 242, 1);
    padding: 8px;

    .look {
        background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
        width: 65px;
        height: 30px;
        line-height: 30px;
        color: white;
        text-align: center;
        font-size: 13px;
        border-radius: 5px;
    }
}
</style>